<template>
  <div class="all-box">
    <echarts2 id="echarts101" :option="optionN3" :styles="styles1"></echarts2>
  </div>
</template>

<script>
import echarts from "echarts";
import echarts2 from "@/components/echarts.vue";

export default {
  name: "Nice",
  props: {
    chartData: {
      type: Array,
      default: () => {
        return [1, 8, 6, 3];
      }
    },
    nameList: {
      type: Array,
      default: () => {
        return ["一分部", "二分部", "三分部", "四分部"];
      }
    }
  },
  data() {
    var colors = ["#7cf317", "#d10eb1", "#4ddbff"];
    return {
      styles1: {
        width: "100%",
        height: "100%",
        margin: "0 auto"
      },
      optionN3: {
        // title: {
        //   text: '隐患来源统计',
        //   color:　'#fff',
        //   left: 5,
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: 14
        //   }
        // },
        barWidth: 10,
        yAxis: {
          type: "category",
          show: true,
          // 去掉y轴坐标线
          data: this.nameList,
          // data: [ '横版支护','钢筋加工','安全防护','墩柱石洞','火工品','钻孔桩', '隧道施工','通用安全', '临时用电', "现场安全" ],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          // 设置字体
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 12
            }
          }
        },

        series: [
          {
            name: "隐患",
            type: "bar",
            // data: [2, 4, 5, 7, 8, 12, 16, 20, 25 , 30],
            data: this.chartData,
            itemStyle: {
              normal: {
                // normal:{
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                // color: function (params){
                //     var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                //     return colorList[params.dataIndex];
                // }
                barBorderRadius: [0, 3, 3, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      {
                        offset: 0,
                        color: "rgba(0,206,218,1)"
                      },
                      {
                        offset: 1,
                        color: "rgba(0,241,255,0)"
                      }
                    ]),
              }
            }
          }
        ],
        xAxis: [
          {
            type: "value",
            // max : 1200,
            // min: 400,
            splitNumber: 4,
            // 去掉刻度
            axisTick: {
              show: false
            },
            // data: ["苹果","小米","华为","其他"] ,
            bottom: 10,
            // show : false,
            // 去掉y轴坐标线
            axisLine: {
              show: false
            },
            //网格样式
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#0d1b4b"],
                width: 1,
                type: "solid"
              }
            },
            // 设置字体
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: 12
              }
            }
          }
        ],
               // 设置图标的位置
        grid: {
          x: 40,
          x2: 60,
          y: 40,
          y2: 10,
          containLabel: true
        }
      }
    };
  },
  components: {
    echarts2
  }
};
</script>
<style lang="scss" scoped>
.all-box {
  width: 100%;
  height: calc(100% - 24px);
}
</style>